<template>
    <div class="card-list">
        <!-- <div class="goBack" v-if="$route.query.ttn == 1">
            <span class="iconfont icon-arrows_left" @click="$router.go(-1)"></span>
        </div> -->
        <div class="card-list-header">
            <div class="card-list-search-height"></div>
            <div ref="cardListTop" class="card-list-search displayFlex" :class="{'topNone':$route.query.ttn == 1}">
                <span>
                    <!--<img v-if="scrollSearch" @click="showSelefCenter(true)" class="card-header-icon" src="../../assets/images/cardList/header.png" alt="">-->
                    <!--<img v-else @click="showSelefCenter(true)" class="card-header-icon" src="../../assets/images/cardList/header_white.png" alt="">-->
                    <img v-if="mineSlidePageProps.photo" @click="showSelefCenter(true)" class="card-header-icon"
                        :src="mineSlidePageProps.photo" alt="">
                </span>
                <span class="card-search-warp flex1 displayFlex flexCenter">
                    <!--<img v-if="scrollSearch" class="card-search-icon" src="../../assets/images/cardList/search.png" alt="">-->
                    <!--<img v-else class="card-search-icon" src="../../assets/images/cardList/search_white.png" alt="">-->
                    <div class="search-input displayFlex flexCenter" @click="openHKHWConfirm('此操作需要下载好看好玩')">
                        <img class="card-search-icon" src="../../assets/images/cardList/search_white_opacity2.png"
                            alt="">
                        <span class="card-search-placeholder">请输入卡券名称</span>
                    </div>
                </span>
                <transition name="cardGetIcon" enter-active-class="animated slideInRight"
                    leave-active-class="animated slideOutRight">
                    <!--<span class="text-right get-money-wicon" v-if="scrollSearch" >-->
                    <!--<img  class="card-get-icon" src="../../assets/images/cardList/get_money.png" alt="">-->
                    <!--</span>-->
                </transition>
            </div>
            <ul class="card-header-list displayFlex">
                <li class="card-header-item flex2" @click="openHKHWConfirm('此操作需要下载好看好玩')">
                    <p>{{acountMsg.cashAmount}}</p>
                    <p><span class="fontSize12">零钱（元）</span></p>
                </li>
                <li class="card-header-item flex1" @click="toOrder">
                    <p>
                        <span class="positionR">
                            <span class="red-point"
                                v-if="acountMsg.precessOrderNum">{{acountMsg.precessOrderNum}}</span>
                            <img class="card-get-icon" src="../../assets/images/cardList/card_order.png" alt="">
                        </span>
                    </p>
                    <p><span class="fontSize12">订单</span></p>
                </li>
                <li class="card-header-item flex1" @click="toCart">
                    <p>
                        <span class="positionR">
                            <span class="red-point"
                                v-if="acountMsg.userCartItemNum">{{acountMsg.userCartItemNum <= 9 ? acountMsg.userCartItemNum : '9+'}}</span>
                            <img class="card-get-icon" src="../../assets/images/cardList/card_buy_car.png" alt="">
                        </span>
                    </p>
                    <p><span class="fontSize12">购物车</span></p>
                </li>
                <li class="card-header-item flex1" @click="openHKHWConfirm('此操作需要下载好看好玩')">
                    <p>
                        <img class="card-get-icon" src="../../assets/images/cardList/card_scan.png" alt="">
                    </p>
                    <p><span class="fontSize12">付款</span></p>
                </li>
            </ul>
        </div>
        <div class="card-coupons-wlist">
            <!--<ul class="card-use-list displayFlex">-->
            <!--<li class="card-use-item" @click="useIndex=0" :class="{'active':useIndex==0}">待使用(9)</li>-->
            <!--<li class="card-use-item" @click="useIndex=1" :class="{'active':useIndex==1}">已使用(8)</li>-->
            <!--<li class="card-use-item" @click="useIndex=2" :class="{'active':useIndex==2}">已过期(99+)</li>-->
            <!--</ul>-->
            <div class="positionR" style="height: calc(100vh - 150px)" v-if="cardItemMsgList.length > 0">
                <scroller ref="myscroller" :on-refresh="refresh" :on-infinite="infinite">
                    <ul class="coupons1_0-list">
                        <li class="coupons1_0-item" v-for="(value,key) in cardItemMsgList">
                            <router-link class=""
                                :to="{path:'/card/detail',query:{ticketNum:value && value.ticketNum ? value.ticketNum : 0}}">
                                <card-item :cardItemMsgProps="dealCardItem(value,key)"></card-item>
                            </router-link>
                        </li>
                    </ul>
                </scroller>
            </div>
            <no-data v-else :noDataProps="{text:'暂时还没卡券哦'}"></no-data>
        </div>
        <!--我的侧边栏-->
        <transition name="slide" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutLeft">
            <mine-slide v-if="slideShow" @getUserCity="getUserCity" @showCity="showCity"
                :mineSlidePageProps="mineSlidePageProps">
            </mine-slide>
        </transition>
        <!--淡入淡出的蒙版-->
        <transition name="border" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
            <v-bord v-if="slideShow">
                <div slot="cantClick" @click="showSelefCenter(false)" class="com_black"></div>
            </v-bord>
        </transition>
        <!--手动选择城市这里暂时不需要-->
        <transition name="city" enter-active-class="animated slideInUp" leave-active-class="animated slideOutDown">
            <city-choise v-if="showCityChoise && false" @closeCityChoise="showCityChoise=false"></city-choise>
        </transition>
        <!--限制微信分享-->
        <wx-hide-menu></wx-hide-menu>
    </div>
</template>

<script>
import Xlocation from '../../x/XLocation'
import { mapGetters } from 'vuex'
export default {
    name: "cardList",
    data () {
        return {
            useIndex: 0,
            slideShow: false,
            // scrollSearch:false,
            topBgColorShow: 0,
            visitId: 0,
            mineSlidePageProps: {},
            cardItemMsgList: [],
            showHide: true,
            acountMsg: {
                /*
                * cashAmount -现金余额
                * scopeAmount -金币(积分)余额
                * configPayPwd -用户是否设置了支付密码 boolean
                * */
            },
            showCityChoise: false,
            page: 1,
            num: 10,
        }
    },
    created () {
        /*没有登录要先登录*/
        if (!this.userId) {
            this.$router.push('/to/login');
            return;
        }
        this.init();
    },
    computed: {
        ...mapGetters({
            currentUser: 'currentUserFn'
        }),
    },
    methods: {
        init () {
            if (!this.isLogin()) {
                this.$router.push({ path: '/to/login' })
            }
            // this.onscrollCardList();
            this.getMineMsg();
            this.getUserCardList();
            this.getUserCashAccount();
        },
        showSelefCenter (boolean) {
            this.slideShow = boolean;
        },
        toCart () {
            this.$router.push({ path: '/order/cart' })
        },
        toOrder () {
            this.$router.push({ path: '/order/list' })
        },
        refresh () {
            this.page = 1;
            setTimeout(() => {
                this.getUserCardList();
                this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
            }, 500)
        },
        infinite () {
            this.$refs.myscroller.finishInfinite(true);//刷新完毕关闭刷新的转圈圈
            setTimeout(() => {
                this.getUserCardList(true);
                this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
            }, 500)
        },
        // onscrollCardList(){
        //     let that = this;
        //     let scrollTop = 0;
        //     window.onscroll = function (e) {
        //         scrollTop = document.getElementsByClassName('coupons1_0-list').scrollTop;
        //
        //         // scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //         // that.topBgColorShow = scrollTop/50;
        //         // that.$refs.cardListTop.style.backgroundColor = `rgba(255,255,255,${that.topBgColorShow})`;
        //         // if( scrollTop > 30 ){
        //         //     that.scrollSearch = true;
        //         // }else{
        //         //     that.scrollSearch = false;
        //         // }
        //     }
        // },
        getUserCashAccount () {
            /**/
            this.$store.dispatch('getUserCashAccountApi', this.userId).then((data) => {
                if (data.success) {
                    this.acountMsg = data.result;
                }
            })
        },
        getMineMsg () {
            /*这个地方只能是我看自己的*/
            let params = {
                visitId: this.userId,
                userId: this.userId
            }
            this.$store.dispatch("getMineMsgApi", params).then((data) => {
                if (data.success) {
                    this.mineSlidePageProps = data.result;
                }
            })
        },
        getUserCity () {
            let userLocation = Xlocation.getUserLocation();
            let params = {
                longitude: userLocation.longitude,
                latitude: userLocation.latitude,
            };
            this.$store.dispatch('getUserCityApi', params).then((data) => {
                if (data.success) {
                    let tempObj = {
                        userLocation: data.result.city
                    };
                    this.mineSlidePageProps = Object.assign({}, this.mineSlidePageProps, tempObj)
                }

            })
        },
        getUserCardList (isMore = false) {
            if (isMore) {
                this.page++;
            }
            let params = {
                userId: this.userId,
                page: this.page,
                num: this.num,
                data: {
                    queryType: 1, //这里只有待使用的劵
                    // storeId:null,//店铺id
                    // selectTicketNum:null,//选中的用户券单号(将放在列表中第1个位置)
                }
            };
            this.$store.dispatch('getUserCardListApi', params).then((data) => {
                if (data.success) {
                    if (!isMore) {
                        this.cardItemMsgList = data.list;
                    } else {
                        this.cardItemMsgList.push(...data.list);
                    }
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '获取卡券列表失败' });
                }
            })
        },
        dealCardItem (obj, index) {
            let tempObj = {
                promotionId: 0,//推广id没有用0代替
                storeIcon: obj.storeIcon,//头像
                templateId: 0,//
                state: obj.state,
                consume: '',
                startTime: obj.startTime,
                endTime: obj.endTime,
                ticketType: obj.ticketType,
                scope: obj.scope,
                condition: obj.ticketContent,
                whichcouponsModel: index,//那个模块
            }
            return tempObj;
        },
        showCity () {
            this.showCityChoise = true;
            this.slideShow = false;
        },

    },
    components: {
        'card-item': () => import('../../components/commonComponents/card/CartItem'),
        'mine-slide': () => import('../user/MineSlide'),
        'v-bord': () => import('../../components/commonComponents/alert/Bord'),
        'city-choise': () => import('../user/CityChoise'),
        "no-data": () => import("../../components/commonActModel/noData/NoData"),
        'wx-hide-menu': () => import('../../components/wx/WxHideMenu'),
    }
}
</script>

<style scoped lang="scss">
.coupons1_0-list {
    padding: 0.1rem 0.1rem 0.5rem;
    width: 100%;
    box-sizing: border-box;
    background-color: #f5f5f5;
}
.coupons1_0-item {
    margin-bottom: 0.1rem;
    height: auto;
    width: 100%;
    position: relative;
}
.more_btn {
    display: block;
    text-align: center;
    font-size: 0.14rem;
    color: #129bf0;
    height: 35px;
    text-decoration: none;
    padding-top: 0.2rem;
}
.animated.slideOutRight,
.animated.slideInRight {
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms; // 动画执行时间
}
.coupon-disabled {
    div {
        color: #ccc !important;
    }
}
.card-list /deep/ .no-wcomment {
    z-index: 1040;
}
.card-list-header {
    height: 140px;
    background-color: #527dd9;
    /*background-image:linear-gradient(to bottom ,#82AADE,#6D8FCC) ;*/
}
.card-list-search-height {
    height: 50px;
    background-color: transparent;
}
.card-list-search {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0);
    -webkit-align-items: center;
    align-items: center;
    height: 50px;
    padding: 11px 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 10;
}
.card-header-icon {
    width: 28px;
    height: 28px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right: 20px;
}
.card-get-icon {
    width: 20px;
    margin-top: 3px;
}
.card-scan {
    width: 20px;
}
.search-input {
    background-color: transparent;
    color: #fff;
}
.card-search-warp {
    padding: 0 10px;
    height: 32px;
    position: relative;
    top: -2px;
    border-radius: 25px;
    font-size: 15px;
    -webkit-align-items: center;
    align-items: center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    background-color: #4171d9;
}
.scroll-search .card-search-warp {
    border-color: #999;
}
.card-search-icon {
    width: 20px;
    margin-right: 5px;
}
.card-search-placeholder {
    opacity: 0.2;
}
.card-header-item {
    font-size: 24px;
    position: relative;
    p {
        text-align: center;
        color: #fff;
        .card-get-icon {
            margin-right: 0;
        }
    }
}
.card-header-list {
    margin-top: 18px;
}
.card-use-item {
    -webkit-flex: 1;
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.card-use-list {
    height: 40px;
    color: #999999;
}
.card-use-item.active {
    color: #333333;
}
.card-coupons-wlist {
    height: 55vh;
}
.animated.slideInLeft,
.animated.fadeIn,
.animated.fadeOut,
.animated.slideOutLeft {
    -webkit-animation-duration: 300ms;
    animation-duration: 300ms; // 动画执行时间
}
.card-list {
    height: 100vh;
    height: 6.67rem;
    .coupons1_0-item {
        margin-bottom: 0.1rem;
    }
}
.get-money-wicon {
    margin-left: 0.1rem;
}
.red-point {
    display: inline-block;
    border-radius: 50%;
    background-color: #ff3333;
    width: 20px;
    height: 20px;
    line-height: 22px;
    position: absolute;
    right: -8px;
    transform: scale(0.7);
    top: -8px;
    color: #fff;
    font-size: 10px;
    white-space: nowrap;
}
// 返回上一级路由
.goBack {
    background: #fff;
    height: 0.44rem;
    width: 100%;
    text-align: left;
    margin-left: 0.1rem;
    line-height: 0.44rem;
    span {
        display: block;
        font-size: 0.22rem;
        font-weight: 800;
        color: #000;
    }
}
// .topNone{
//     top: .44rem;
// }
</style>